<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      v-if="isEsUser()"
      :showLink="`true`"
      @linkClick="handleBackLink"
      :linkText="`下载投诉二维码`"
    ></topTitle>
    <topTitle
      :titleText="titleText"
      v-if="!isEsUser() && !isHsUser()"
    ></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item
              v-if="!isCounty || isLzh || isHsUser()"
              label="区域"
              class="row-padding-bottom"
            >
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="受理时限" class="row-padding-bottom">
              <el-select
                ref="select_icon"
                :class="isSelect ? 'selBox' : ''"
                v-model="filterField.colorStr"
                @change="iconChange"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in isLzh ? lzhColorStrOptions : colorStrOptions"
                  :label="item.label"
                  :key="item.value"
                  :value="item.value"
                >
                  <span
                    :class="
                      item.value != 'GREEN'
                        ? item.value === 'YELLOW'
                          ? 'dot yellow'
                          : 'dot red'
                        : 'dot green'
                    "
                  ></span>
                  <span class="desc">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业领域" class="row-padding-bottom">
                <el-select
                  v-model="filterField.fieldType"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in fieldTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="反映人" class="row-padding-bottom">
                <el-input
                  v-model="filterField.name"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="反映人手机号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.perTel"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="受理状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isLzh ? lzhStatusOptions : statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="拖欠工资单位" class="row-padding-bottom">
                <el-input
                  v-model="filterField.complaintName"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="收件日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                  :startTime="startTimeValue"
                  :endTime="endTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="办结日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getConcludeStartTimeValue"
                  @getEndTimeValue="getConcludeEndTimeValue"
                  :startTime="concludeStartTimeValue"
                  :endTime="concludeEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="是否重复号码" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isRepeatTel"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isRepeat"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="是否重复诉求" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isRepeatAppeal"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isRepeat"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="编号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.backPayNumber"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                    </el-form-item> -->
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="proDetailsListBox">
        <div class="colSetupBottom">
          <el-button
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icondaochu"
            v-hasBtn="[
              'esCaseList:export',
              'myResponsibleLzh:export',
              'myResponsibleLzhSGF:export',
              'myResponsibleLzhJSF:export',
              'hsCaseListTab:export',
              'hsMyResponsibleTab:export',
            ]"
            @click="getExportList"
          >
            <span class="opetareText">批量导出</span>
          </el-button>
          <el-button
            v-if="isYcUser() || isYiLingUser()"
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icondaoru"
            style="margin-right: 10px; margin-left: 0"
            @click="batchImport"
          >
            <span class="opetareText">批量导入</span>
          </el-button>
          <el-button
            v-if="isHsUser() && !myResponsibleHS"
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icondaoru"
            style="margin-right: 10px; margin-left: 0"
            @click="hsBatchImport"
          >
            <span class="opetareText">批量导入</span>
          </el-button>
        </div>
        <div
          ref="tableBox"
          :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        >
          <el-table
            ref="tableBox1"
            :data="tableList"
            @sort-change="sortChange"
            v-loading="loading"
            :max-height="tableHeight"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              v-if="yiling"
              label="编号"
              min-width="150"
              align="left"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <div class="tipBox">
                  <span>{{ scope.row.backPayNumber }}</span>
                  <span
                    class="toptip"
                    v-if="
                      new Date(new Date().toLocaleDateString()).getTime() -
                        new Date(scope.row.createTime + ' 00:00:00').getTime() <
                      24 * 60 * 60 * 1000
                    "
                    >new</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              prop="backPayNumber"
              label="编号"
              min-width="120"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column label="办理时限" width="230" align="center">
              <template slot-scope="scope">
                <span v-if="!calcColor(scope.row)">--</span>
                <span
                  v-else
                  :class="
                    calcColor(scope.row) != 'GREEN'
                      ? calcColor(scope.row) === 'YELLOW'
                        ? 'dot yellow'
                        : 'dot red'
                      : 'dot green'
                  "
                ></span>
              </template>
            </el-table-column>
            <el-table-column prop="areaName" label="所在地区" width="230">
              <template slot-scope="scope">
                <span
                  >{{ scope.row.cityName ? scope.row.cityName : ''
                  }}{{
                    scope.row.countyName && scope.row.countyName != '-'
                      ? '-' + scope.row.countyName
                      : ''
                  }}{{
                    scope.row.streetName && scope.row.streetName != '-'
                      ? '-' + scope.row.streetName
                      : ''
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="fieldTypeDesc"
              label="行业领域"
              align="center"
              min-width="120"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column label="拖欠工资单位名称/项目工地名称" width="250">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.complaintName"
                  :columnName="'complaintName'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="managerName"
              label="拖欠工资单位负责人姓名"
              align="center"
              min-width="200"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column label="拖欠工资单位地址" width="230">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.address"
                  :columnName="'address'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column label="欠薪基本情况摘要" width="230">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.complaintRemark"
                  :columnName="'complaintRemark'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="tel"
              label="拖欠工资单位电话"
              min-width="150"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column label="号码标记" min-width="100" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row.isRepeatTel === 'YES' ? '重复' : '--'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="诉求标记" min-width="100" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row.isRepeatAppeal === 'YES' ? '重复' : '--'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="反映人姓名"
              min-width="120"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="perTel"
              label="反映人手机号"
              min-width="120"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="idcard"
              label="反映人身份证号"
              min-width="180"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="backPayCount"
              sortable="custom"
              label="欠薪人数"
              min-width="120"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="backPayTotal"
              sortable="custom"
              label="欠薪金额"
              min-width="120"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column label="始发时间" min-width="120" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row.complaintYear && scope.row.complaintMonth
                    ? scope.row.complaintYear + '-' + scope.row.complaintMonth
                    : '--'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              sortable="custom"
              label="最近受理进展"
              align="center"
              min-width="140"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="statusDesc"
              label="受理状态"
              align="center"
              :formatter="formatTd"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="concludeDate"
              sortable="custom"
              label="办结日期"
              min-width="120"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="left"
              fixed="right"
              min-width="200"
            >
              <template slot-scope="scope">
                <template v-if="!isYiLingUser()">
                  <!-- 我负责的诉求没有删除按钮 -->
                  <span
                    v-if="
                      (isLzh &&
                        (userType === 'DIRECTOR' || userType === 'MONITOR')) ||
                      myResponsibleHS
                    "
                  >
                    <el-link type="primary" @click="toDetail(scope.row)"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      v-show="!isMyResponsibleLzh && !myResponsibleHS"
                      @click="onDel(scope.row.id)"
                      >删除</el-link
                    >
                  </span>
                  <span v-else-if="userType === 'COMPANY'">
                    <el-link type="primary" @click="toDetail(scope.row)"
                      >查看详情</el-link
                    >
                  </span>
                  <span v-else>
                    <el-link
                      type="primary"
                      v-hasBtn="[
                        'esCaseList:detail',
                        'hsCaseListTab:detail',
                        'hsMyResponsibleTab:detail',
                      ]"
                      @click="toDetail(scope.row)"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      v-if="(!isCounty || isNeedDel) && userType !== 'DIRECTOR'"
                      v-hasBtn="[
                        'esCaseList:delete',
                        'hsCaseListTab:delete',
                        'hsMyResponsibleTab:delete',
                      ]"
                      @click="onDel(scope.row.id)"
                      >删除</el-link
                    >
                  </span>
                </template>
                <template v-else>
                  <!-- 我负责的诉求没有删除按钮 -->
                  <span
                    v-if="
                      isLzh &&
                      (userType === 'DIRECTOR' || userType === 'MONITOR')
                    "
                  >
                    <el-link type="primary" @click="toDetail(scope.row)"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      v-show="!isMyResponsibleLzh && scope.row.isPush !== 'YES'"
                      @click="onDel(scope.row.id)"
                      >删除</el-link
                    >
                  </span>
                  <span v-else-if="userType === 'COMPANY'">
                    <el-link type="primary" @click="toDetail(scope.row)"
                      >查看详情</el-link
                    >
                  </span>
                  <span v-else>
                    <el-link
                      type="primary"
                      v-hasBtn="'esCaseList:detail'"
                      @click="toDetail(scope.row)"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      v-if="
                        !isCounty &&
                        userType !== 'DIRECTOR' &&
                        scope.row.isPush !== 'YES'
                      "
                      v-hasBtn="'esCaseList:delete'"
                      @click="onDel(scope.row.id)"
                      >删除</el-link
                    >
                  </span>
                </template>
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关数据"></emptyTable>
            </div>
          </el-table>
          <Pagination
            ref="pagination"
            @getList="getTableList"
            :filterField="filterField"
            :requestUrl="requestUrl"
            @getpageNo="getpageNo"
            @getpageSize="getpageSize"
          ></Pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
// import scrollTable from '@/mixin/scrollTable.js';
export default {
  name: 'esCaseList',
  // mixins: [scrollTable],
  props: ['isMyResponsibleLzh', 'myResponsibleHS', 'activeName'],
  data() {
    return {
      yiling: false,
      advanced: false,
      isCounty: false,
      userType: '',
      isSelect: false,
      titleText: '欠薪诉求',
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rightbackpay/expand/listforweb',
      areaId: [],
      //搜索条件
      filterField: {
        areaId: '', //区域
        colorStr: '',
        fieldType: '',
        name: '', //反映人
        perTel: '',
        status: '', //办理状态
        complaintName: '', //用人单位
        startDateStr: '', //收件起始日期
        endDateStr: '', //收件结束日期
        concludeStartDate: '', //办结起始日期
        concludeEndDate: '', //办结结束日期
        isRepeatTel: '', //是否重复号码（NO：否，YES：是）
        isRepeatAppeal: '', //是否重复诉求（NO：否，YES：是）
        backPayNumber: '', //编号
        dataSource: '',
      },
      pageSize: 20,
      pageNo: 1,
      colorStrOptions: [
        {
          value: 'GREEN',
          label: '提交天数≤30天/已办结',
        },
        {
          value: 'YELLOW',
          label: '30<提交天数≤60',
        },
        {
          value: 'RED',
          label: '提交天数>60',
        },
      ],
      lzhColorStrOptions: [
        {
          value: 'GREEN',
          label: '提交天数≤15天/已办结',
        },
        {
          value: 'YELLOW',
          label: '15<提交天数≤30',
        },
        {
          value: 'RED',
          label: '提交天数>30',
        },
      ],
      fieldTypeOptions: [
        {
          label: '建设领域',
          value: 'CS',
        },
        {
          label: '非建领域',
          value: 'NC',
        },
      ],
      lzhStatusOptions: [
        {
          value: 'WAIT_ACCEPT',
          label: '待受理',
        },
        {
          value: 'ACCEPTING',
          label: '办理中',
        },
        {
          value: 'ACCEPTED',
          label: '已办结',
        },
        {
          value: 'REFUSED',
          label: '不受理',
        },
      ],
      statusOptions: [
        {
          value: 'WAIT_ACCEPT',
          label: '待受理',
        },
        {
          value: 'ACCEPTING',
          label: '办理中',
        },
        {
          value: 'ACCEPTED',
          label: '已办结',
        },
      ],
      isRepeat: [
        {
          value: 'YES',
          label: '重复',
        },
        {
          value: 'NO',
          label: '非重复',
        },
      ],
      isLzh: false, //是否是梁子湖及梁子湖乡镇监察
      nopayCodes: '', //恩施欠薪投诉二维码
      isNeedDel: false,
      hiddleToolBar: false,
      tableHeight: null,
    }
  },
  computed: { ...mapState(['areasOptions']) },
  watch: {
    // 黄石标题tab
    activeName(newValue, oldValue) {
      this.areaId = []
      this.filterField = {
        areaId: '', //区域
        colorStr: '',
        fieldType: '',
        name: '', //反映人
        perTel: '',
        status: '', //办理状态
        complaintName: '', //用人单位
        startDateStr: '', //收件起始日期
        endDateStr: '', //收件结束日期
        concludeStartDate: '', //办结起始日期
        concludeEndDate: '', //办结结束日期
        isRepeatTel: '', //是否重复号码（NO：否，YES：是）
        isRepeatAppeal: '', //是否重复诉求（NO：否，YES：是）
        backPayNumber: '', //编号
        sortField: '',
        sort: '',
        dataSource: '',
      }
      this.concludeEndTimeValue = ''
      this.concludeStartTimeValue = ''
      this.startTimeValue = ''
      this.endTimeValue = ''
      this.filterField.sourceArea = this.$store.state.currentAreaId
      this.filterField.dataSource = newValue

      if (this.myResponsibleHS) {
        this.filterField.isMine = '1'
      }
      this.iconChange()
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    },
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    if (window.location.host.indexOf('yl') !== -1) {
      this.yiling = true
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
    // this.$nextTick(function () {
    //     this.tableHeight = window.innerHeight - 240;
    //     // 监听窗口大小变化
    //     let self = this;
    //     window.onresize = function () {
    //         self.tableHeight = window.innerHeight - 240;
    //     }
    // })
  },
  created() {
    var currentAreaId = this.$store.state.currentAreaId
    this.filterField.sourceArea = currentAreaId
    if (currentAreaId) {
      if (currentAreaId === '420702' || currentAreaId.indexOf('420702') > -1) {
        this.isLzh = true
      } else {
        this.isLzh = false
      }
    }
    if (this.isHsUser()) {
      Object.assign(this.filterField, {
        dataSource: this.activeName, //下划线字段
      })
    }

    this.$store.state.currentAreaId &&
    this.$store.state.currentAreaId.length > 4
      ? (this.isCounty = true)
      : (this.isCounty = false)
    this.userType = this.$store.state.userType
    this.filterField.complaintName = this.$route.query.projectName || ''
    if (
      this.isMyResponsibleLzh === 'myResponsibleLzh' ||
      this.myResponsibleHS
    ) {
      this.filterField.isMine = '1'
      this.titleText = '我负责的诉求'
    } else {
      this.filterField.isMine = ''
      this.titleText = '欠薪诉求'
    }
    if (this.isEsUser()) {
      this.nopayCodes = ''
      this.getNopayCode()
    }

    // 判断是否是区县监察但是需要删除
    this.$store.state.sysRolesArr.forEach((each) => {
      if (each.code == 'Del_Unpaycomplaint') {
        this.isNeedDel = true
      }
    })
  },
  methods: {
    getNopayCode() {
      this.axios.post('api-f/files/back_pay/qr').then((res) => {
        if (!res.data.hasError) {
          this.nopayCodes = res.data.result.url
        }
      })
    },
    downloadCode() {
      window.open(this.nopayCodes)
    },
    //点击下载欠薪二维码
    handleBackLink() {
      this.downloadCode()
    },
    batchImport() {
      this.$router.push('/home/unpaidComplaint/YCImportCase')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/unpaidComplaint/esCaseList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    iconChange(val) {
      const dom = this.$refs['select_icon'].$el
      const dotDom = document.getElementsByClassName('appendSpan')[0]
      if (dotDom) {
        // 清除已有节点
        dom.children[0].removeChild(dotDom)
      }
      if (val) {
        this.isSelect = true
        // 选中插入节点
        const iconDom = document.createElement('span')
        iconDom.setAttribute(
          'class',
          val != 'GREEN'
            ? val === 'YELLOW'
              ? 'appendSpan appendYellow'
              : 'appendSpan appendRed'
            : 'appendSpan appendGreen'
        )
        dom.children[0].appendChild(iconDom)
      } else {
        this.isSelect = false
      }
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: 'api-r/rightbackpay/expand/listforweb',
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    /**
     * @description: 导出报表
     */
    async getExportList() {
      const flag = await this.getExports()
      let {
        areaId,
        colorStr,
        fieldType,
        name,
        perTel,
        status,
        complaintName,
        startDateStr,
        endDateStr,
        concludeStartDate,
        concludeEndDate,
        isRepeatTel,
        isRepeatAppeal,
        backPayNumber,
        isMine,
        sortField,
        sort,
        dataSource,
      } = this.filterField
      if (flag) {
        window.location.href =
          common.commonApi +
          'api-r/rightbackpay/expand/export?areaId=' +
          areaId +
          '&colorStr=' +
          colorStr +
          '&fieldType=' +
          fieldType +
          '&name=' +
          name +
          '&perTel=' +
          perTel +
          '&status=' +
          status +
          '&complaintName=' +
          complaintName +
          '&startDateStr=' +
          startDateStr +
          '&endDateStr=' +
          endDateStr +
          '&concludeStartDate=' +
          concludeStartDate +
          '&concludeEndDate=' +
          concludeEndDate +
          '&isRepeatTel=' +
          isRepeatTel +
          '&isRepeatAppeal=' +
          isRepeatAppeal +
          '&backPayNumber=' +
          backPayNumber +
          '&isMine=' +
          isMine +
          '&sortField=' +
          sortField +
          '&sort=' +
          sort +
          '&sourceArea=' +
          this.$store.state.currentAreaId +
          '&dataSource=' +
          dataSource +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    calcColor(row) {
      let colorStr = ''
      if (!row.createTime) return
      let createTime = new Date(row.createTime + ' 00:00:00').getTime()
      let nowDate = new Date().toLocaleDateString()
      let now = new Date(nowDate).getTime()
      if (row.status === 'ACCEPTED' || row.status === 'REFUSED') {
        colorStr = 'GREEN'
      } else {
        if (this.isLzh) {
          if (now - createTime <= 15 * 24 * 60 * 60 * 1000) {
            colorStr = 'GREEN'
          }
          if (
            now - createTime > 15 * 24 * 60 * 60 * 1000 &&
            now - createTime <= 30 * 24 * 60 * 60 * 1000
          ) {
            colorStr = 'YELLOW'
          }
          if (now - createTime > 30 * 24 * 60 * 60 * 1000) {
            colorStr = 'RED'
          }
        } else {
          if (now - createTime <= 30 * 24 * 60 * 60 * 1000) {
            colorStr = 'GREEN'
          }
          if (
            now - createTime > 30 * 24 * 60 * 60 * 1000 &&
            now - createTime <= 60 * 24 * 60 * 60 * 1000
          ) {
            colorStr = 'YELLOW'
          }
          if (now - createTime > 60 * 24 * 60 * 60 * 1000) {
            colorStr = 'RED'
          }
        }
      }
      return colorStr
    },
    /**
     * @description: 获取收件起始日期
     * @param {*} val
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDateStr = val
        this.startTimeValue = val
      } else {
        this.filterField.startDateStr = ''
        this.startTimeValue = ''
      }
    },
    /**
     * @description: 获取收件结束日期
     * @param {*} val
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDateStr = val
        this.endTimeValue = val
      } else {
        this.filterField.endDateStr = ''
        this.endTimeValue = ''
      }
    },
    /**
     * @description: 获取办结起始日期
     * @param {*} val
     */
    getConcludeStartTimeValue(val) {
      if (val) {
        this.filterField.concludeStartDate = val
        this.concludeStartTimeValue = val
      } else {
        this.filterField.concludeStartDate = ''
        this.concludeStartTimeValue = ''
      }
    },
    /**
     * @description: 获取办结结束日期
     * @param {*} val
     */
    getConcludeEndTimeValue(val) {
      if (val) {
        this.filterField.concludeEndDate = val
        this.concludeEndTimeValue = val
      } else {
        this.filterField.concludeEndDate = ''
        this.concludeEndTimeValue = ''
      }
    },
    /**
     * @description: 获取全部欠薪诉求
     * @param {*} data
     */
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    /**
     * @description: 搜索欠薪诉求
     */
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toDetail(row) {
      //梁子湖区 420702
      if (this.isEZhouUser()) {
        this.$router.push({
          path: '/home/unpaidComplaint/caseDetailLzh',
          query: {
            id: row.id,
            isMyResponsibleLzh: this.isMyResponsibleLzh,
          },
        })
      } else if (this.isHsUser()) {
        this.$router.push({
          path: '/home/unpaidComplaint/esCaseDetail',
          query: {
            id: row.id,
            isMyResponsibleLzh: this.isMyResponsibleLzh,
            myResponsibleHS: this.myResponsibleHS,
            isPush: row.isPush,
            activeName: this.activeName,
          },
        })
      } else {
        this.$router.push({
          path: '/home/unpaidComplaint/esCaseDetail',
          query: {
            id: row.id,
            isMyResponsibleLzh: this.isMyResponsibleLzh,
            myResponsibleHS: this.myResponsibleHS,
            isPush: row.isPush,
            activeName: this.activeName,
          },
        })
      }
      var url
      if (this.isMyResponsibleLzh === 'myResponsibleLzh') {
        url = '/home/unpaidComplaint/myResponsibleLzh'
      } else if (this.isHsUser() && this.myResponsibleHS) {
        url = '/home/unpaidComplaint/hsMyResponsibleTab'
      } else if (this.isHsUser() && this.myResponsibleHS == undefined) {
        url = '/home/unpaidComplaint/hsCaseListTab'
      } else {
        url = '/home/unpaidComplaint/esCaseList'
      }
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 删除欠薪诉求
     */
    onDel(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delAllocatedSet(id)
        })
        .catch(() => {})
    },
    delAllocatedSet(id) {
      this.axios({
        method: 'post',
        url: 'api-r/rightbackpay/expand/delbyid',
        data: {
          id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
        ? this.areaId[this.areaId.length - 1]
        : ''
      this.filterField.areaId = areaId
    },
    // 黄石导入
    hsBatchImport() {
      this.$router.push({
        path: '/home/unpaidComplaint/hsBatchImportCase',
        query: {
          activeName: this.activeName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/unpaidComplaint/hsCaseListTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = e.target.scrollTop
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          this.tableHeight = window.innerHeight - 246
          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}
// .tableList {
//     border-top: 10px solid #f5f7fa;
//     padding: 20px 24px;
// }
.proDetailsListBox {
  padding: 24px 0;
  background: #fff;
  .colSetupBottom {
    margin-bottom: 24px;
    float: left;
    padding-left: 24px;
    .colSetupBtn {
      float: left;
      margin-right: 20px;
    }
    /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
      float: right;
    }
  }
}
.table-header {
  width: 100%;
  font-size: 16px;
  color: #333333;
  padding: 20px 0px;
}
.table-btn {
  widows: 100%;
  height: 100%;
  text-align: right;
}
.selBox {
  /deep/ .el-input__inner {
    padding-left: 28px;
  }
}
// .appendBox {
//     width: calc(100% - 40px);
//     height: 100%;
//     position: absolute;
//     .dot {
//         display: inline-block;
//         width: 12px;
//         height: 12px;
//         border-radius: 50%;
//         position: absolute;
//         left: 0;
//         top: calc(50% - 6px);
//     }
//     .green {
//         background: rgb(4, 151, 138);
//     }
//     .yellow {
//         background: rgb(246, 155, 34);
//     }
//     .red {
//         background: rgb(218, 4, 29);
//     }
//     .desc {
//         margin-left: 30px;
//     }
// }
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  // position: absolute;
  // left: 0;
  // top: calc(50% - 6px);
}
.green {
  background: rgb(4, 151, 138);
}
.yellow {
  background: rgb(246, 155, 34);
}
.red {
  background: rgb(218, 4, 29);
}
</style>
<style lang="less">
.appendSpan {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: calc(50% - 6px);
}
.appendGreen {
  background: rgb(4, 151, 138);
}
.appendYellow {
  background: rgb(246, 155, 34);
}
.appendRed {
  background: rgb(218, 4, 29);
}

.toolbar .searchBtn {
  width: 82px;
  height: 36px;
  font-size: 12px;
  text-align: center;
  background: #009588;
  border-radius: 4px;
  padding: 0;
  border-color: #009588;
  margin-left: 6px;
  vertical-align: top;
}

.toolbar .searchBtn:hover {
  background: #009588;
  border-color: #009588;
  opacity: 0.8;
}
.tipBox {
  width: 100%;
  height: 100%;
  position: relative;
  .toptip {
    position: absolute;
    top: -10px;
    right: -15px;
    font-size: 12px;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: #19385c;
    background-image: -webkit-linear-gradient(
      -45deg,
      red 30%,
      pink 50%,
      red 70%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 350%;
    animation: shinetext 4s infinite linear;
  }
}
@keyframes shinetext {
  from {
    background-position: 100%;
  }
  to {
    background-position: 0;
  }
}
@import '../../../static/css/filterArea.less';
</style>
